<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Animated Background Color</title>

<style>
h1 {
    font-size:110px;
    margin:0;
    text-align:center;
    padding:0;
    text-shadow:-2px 2px #555, -2px -2px #444, 2px -2px #444, 2px 2px #444, -14px 14px 10px #444;
    filter:progid:DXImageTransform.Microsoft.Shadow(Strength=20, Direction=235, Color='#000000');
}
</style>

</head>

<body>


<div id="urgent"><h1>Red Alert!</h1><span style="display:block;text-align:right;">The Web server is under attack! * http://docstore.mik.ua/orelly/webprog/jscript/ch18_03.htm</span></div>
<!-- This is the animation script for the element -->
<script>  
var e = document.getElementById("urgent");         // Get Element object
var colors = ["white", "yellow", "orange", "red"]  // Colors to cycle through
var nextColor = 0;                                 // Position in the cycle
// Evaluate the following expression every 500 milliseconds
// to animate the background color of the div element
setInterval("e.style.backgroundColor=colors[nextColor++%colors.length];", 599);
</script>

</body>
</html>